<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        .main{
            width: 1100px;
            margin: 0 auto;
            /* background: pink; */
        }
        .box-top{
            padding: 20px;
            font-weight: 900;
            /* background: red; */
            margin-bottom: 20px;
            line-height: 50px;
        }
      
        .box-left{
            width: 500px;
            float: left;
            background: bisque;
            /* height: 600px; */
            margin-left: 100px;
        }
        .box-right{
            float: left;
            width: 700px;
            /* background: pink; */
            height: 600px;
            padding-left: 60px;
            box-sizing: border-box;

        }
        .box-left img{
            width: 500px;
            /* height: 600px; */

        }
        #title{
            margin-bottom: 30px;
            padding-top: 50px;
           

        }
        #price{
            color: orange;
            font-size: 26px;
            margin-bottom: 30px;
            padding-top: 50px;


        }
        .text{
            font-size: 24px;
            padding-top: 50px;

        }
        #input{
            width: 100px;
            height: 31px;
            margin-top: 50px;
        }
        #add{
            width: 298px;
            height: 52px;
             line-height: 52px;
           font-size: 16px;
            margin-top: 50px;
            background: #ff6700;
            color: white;
            text-align: center;
            border: none;
            outline: none;
        }
        #look{
            width: 298px;
            height: 52px;
             line-height: 52px;
           font-size: 16px;
            margin-top: 50px;
            background: red;
            color: white;
            text-align: center;
            border: none;
            outline: none;

        }
			
		</style>
        <link rel="stylesheet" href="./style.css">
	</head>
	<body>
        <script src="./jquery-1.12.4.min.js"></script>
		<div class="box ">
            <div class="box-top"><h1>小米商城</h1></div>
            <div class="box-left ">
                <img src="./images/p1.jpg" alt="" id="pic">
            </div>
            <div class="box-right  ">
                <h1 id="title">Redmi Note 10 系列 </h1>
                <span id="one" style="display: none;">23445533</span>
                <p id="price">599 元</p>
                <span class="text">输入数量</span>
                <input type="text" value="1" id="input"><br/>
                <input type="text" value="加入购物车" id="add">
                <button id="look"><a href="./car.html"style="color: white;text-decoration: none;">查看购物车</a></button>
            </div>
        </div>
        <script>
            $('#add').click(function(){
                $.ajax({
                    url:'http://localhost/interface/add.php',
                    data:{
                        id:$('#one').text(),
                        name:$('#title').text(),
                        img:$('#pic').attr('src'),
                        price:$('#price').text(),
                        num:$('#input').val()
                    },
                    success:function(res){
                        // console.log(res);
                        if(res.code==1){
                            alert('商品加入成功')
                        }

                    },
                    dataType:'json'
                })
            })
        </script>
	</body>
</html>
